<template>
  <div class="personal">
      <div class="personalBox">
          <div class="personalTitle">个人中心</div>
          <div class="portrait">
              <div><img :src="headimgurl"></div>
              <span>{{nickname}}</span>
          </div>
      </div>
      <div class="personalList">
        <div class="personalLi" @click="routerLink(0)">
              <div class="left">
                  <i class="iconfont icon-dingdan"></i>
                  <span>我的订单</span>
              </div>
              <i class="el-icon-arrow-right"></i>
          </div>
          <!-- <div class="personalLi" @click="routerLink(0)">
              <div class="left">
                  <i class="iconfont icon-qianbao"></i>
                  <span>我的钱包</span>
              </div>
              <i class="el-icon-arrow-right"></i>
          </div> -->
          <div class="personalLi" @click="routerLink(1)">
              <div class="left">
                  <i class="iconfont icon-dizhi"></i>
                  <span>我的地址</span>
              </div>
              <i class="el-icon-arrow-right"></i>
          </div>
        	<div class="personalLi" @click="routerLink(2)">
              <div class="left">
                  <i class="iconfont icon-youjian"></i>
                  <span>邮寄快递</span>
              </div>
              <i class="el-icon-arrow-right"></i>
          </div>
          <!-- <div class="personalLi" @click="routerLink(2)">
              <div class="left">
                  <i class="iconfont icon-mima"></i>
                  <span>我的密码</span>
              </div>
              <i class="el-icon-arrow-right"></i>
          </div> -->
      </div>
      <div class="footerFix">
            <div class="taBox">
                <div class="taBoxItem" @click="tab(0)">
                    <i class="iconfont icon-7"></i>
                    <span>代取</span>
                </div>
                <!--<div class="taBoxItem" @click="tab(1)">
                    <i class="iconfont icon-youjian"></i>
                    <span>邮寄</span>
                    
                </div>-->
                <div class="taBoxItem active" @click="tab(2)">
                    <i class="iconfont icon-icon-test"></i>
                    <span>我的</span>
                    
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: 'personal',
  data () {
    return {
      nickname: '',
      headimgurl: '',
    }
  },
  mounted(){
      this.nickname = localStorage.getItem('nickname');
      this.headimgurl = localStorage.getItem('headimgurl');
  },
  methods:{
      tab(index){
          if(index == 0){
              this.$router.push("/")
          }else if(index == 1){
          	window.location.href = 'https://m.kuaidi100.com/order/market/eb.jsp?sign=TRz9921Market'
          }else{
             this.$router.push("/personal")  
          }
      },
      routerLink(index){
          if(index == 0){
              this.$router.push("/order");
          }else if(index == 1){
              this.$router.push("/addressList");
          }else if(index == 2){
             window.location.href = 'https://m.kuaidi100.com/order/market/eb.jsp?sign=TRz9921Market'
          }
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.personalBox{background: #fcd927;color: #fff;padding-bottom: 20px;}
.personalTitle{font-size: 18px;line-height: 40px;}
.portrait div{width: 132px;height: 132px;border-radius: 50%;overflow: hidden;margin: 10px auto;}
.portrait div img{width: 100%;height: 100%;}
.portrait span{font-size: 16px;}
.personalList{padding: 0 10px;}
.personalLi{display: flex;justify-content: space-between;line-height: 48px;align-items: center;font-size: 16px;border-bottom: 1px solid #ddd;}
.personalLi i{font-size: 20px;}
.left{display: flex;align-items: center;}
.left span{margin-left: 12px;}
.footerFix{height: 50px;position: fixed;bottom: 0px;background: #fff;z-index: 99;width: 100%;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);}
.taBox{display: flex;height: 100%;border-top: 1px solid #ddd;}
.taBoxItem{flex-grow: 1;text-align: center;font-size: 12px;border-right: 1px solid #ddd;display: flex;flex-direction: column;justify-content: center;}
.taBoxItem.active{color: #fcd927;}
.taBoxItem i{font-size: 24px;}
.taBoxItem:focus{background: #ddd;}
.taBoxItem:last-child{border-right:none;}
</style>
